// 加载
var loading = document.querySelector(".loading");
// 主页面
var main_3 = document.querySelector(".main_3");
var main_3_Pic = main_3.children[0];
// 游戏菜单
var start = document.querySelector(".start");
var start_text = document.querySelector(".start .text");
var start_timer = null;
var start_i = 0;
var btn_start = document.querySelector(".btn_start");
var btn_rule = document.querySelector(".btn_rule");
var btn_timer = null;
var btn_i = 0;
// 规则
var rule = document.querySelector(".rule");
var rule_pic = rule.children[0];
var rule_div = rule.children[1];


var loader = new resLoader({
    resources: [
        'images/loading/bg.jpg',
        'images/loading/logo.png',
        'images/loading/plane.png',
        'images/one_pic/bg.jpg',
        'images/start/voice.png',
        'images/start/stone1.png',
        'images/start/stone2.png',
        'images/start/btn_start.png',
        'images/start/btn_rule.png',
        'images/game/mask.jpg',
        'images/game_start/left.png',
        'images/game_start/right.png',
        'images/game_start/plane_start.png',
        'images/rule/bg.jpg',
        'images/start/bg.jpg',
        'img/score.png',
        'img/plane.png',
        'img/bg1.png',
        'img/earth.png',
		'http://p0.qhimg.com/t01943ced462da67833.jpg',
		'http://p6.qhimg.com/t01aa15a7ba7ccb49a7.jpg',
		'http://p8.qhimg.com/t010f1e8badf1134376.jpg',
		'http://p8.qhimg.com/t01cf37ea915533a032.jpg',
		'http://p3.qhimg.com/t0193d8a3963e1803e9.jpg',
		'http://p3.qhimg.com/t01cd6a4d4b4bd4457b.jpg'
    ],
    onStart: function (total) {
        console.log('start:' + total);
    },
    onProgress: function (current, total) {
        console.log(current + '/' + total);
        var percent = current / (total-1) * 100;
        $('.loading_plane').css('bottom', percent + '%');
        $('.loading_plane span').text(Math.floor(percent+9) + '%');
        // $('.progresstext .total').text(total);
    },
    onComplete: function (total) {
        // 跳转到下一个页面
        loading.style.display = "none";
        main_3.style.display = "block";
        document.body.setAttribute("style","");
    }
});

loader.start();

// 点击加载完毕的页面切换游戏菜单
main_3.addEventListener("click",function(){
    this.style.display = "none";
    document.body.setAttribute("style","background: url(images/start/bg.jpg) no-repeat top right;");
    start.style.display = "block";
    start_timer = setInterval(function(){
        start_text.style.height = start_i+"%";
        start_i++;
        if(start_i>32){
            clearInterval(start_timer);
        }
    },300)
})

// 打开规则按钮
btn_rule.addEventListener("click",function(){
    btn_i = 0;
    clearInterval(start_timer);
    btn_timer = setInterval(function(){
        btn_start.style.right = -btn_i+"%";
        btn_rule.style.right = -btn_i+"%";
        btn_i++;
        if(btn_i>48){
            clearInterval(btn_timer);
            start.style.display = "none";
            rule.style.display = "block";
            document.body.setAttribute("style","");
        }
    })
})

// 关闭规则按钮
rule_div.addEventListener("click",function(){
    // console.log(1);
    start.style.display = "block";
    rule.style.display = "none";
    document.body.setAttribute("style","background: url(images/start/bg.jpg) no-repeat top right;");
    btn_start.style.right = 0;
    btn_rule.style.right = 0;
    start_timer = setInterval(function(){
        start_text.style.height = start_i+"%";
        start_i++;
        if(start_i>32){
            clearInterval(start_timer);
        }
    },300)
})






// 使用json封装小飞机按钮功能
var myClick = {
	"width":"",
	"left":"",
	"body_width":document.body.offsetWidth,
	plane_left:function(click_ele,move_ele){
		myClick.width = move_ele.offsetWidth;
		myClick.left = move_ele.offsetLeft;
		document.querySelector(click_ele).addEventListener("click",function(){
			if(myClick.left-myClick.width < myClick.width/2){
				move_ele.style.left = myClick.width/2+"px";
			}
			else{
				myClick.left -= myClick.width;
				move_ele.style.left = myClick.left + "px";
			}
		})
	},
	plane_right:function(click_ele,move_ele){
		myClick.width = move_ele.offsetWidth;
		myClick.left = move_ele.offsetLeft;
		document.querySelector(click_ele).addEventListener("click",function(){
			if(myClick.left+myClick.width > myClick.body_width-myClick.width/2){
				move_ele.style.left = myClick.body_width - myClick.width/2+"px";
			}
			else{
				myClick.left += myClick.width;
				move_ele.style.left = myClick.left + "px";
			}
		})
	}
}

//缓动动画封装
//对传入的json做以下处理
//对opactiy进行百进制处理，防止精度丢失
//对z-index建议使用驼峰处理
// 参数：元素，动画内容,定时器时间，回调函数
function mYanimate(ele,json,time,fn){
    //要用定时器，先清定时器
    clearInterval(ele.timer);
    ele.timer = setInterval(function(){
        //开闭原则,用于清除定时器(修复bug)
        var bool = true;
        //获取初始位置,通过getComputedStyle()获取行外样式
        for(var k in json){
            //设置初始位置
            var leader;
            //对opacity的处理
            if(k == "opacity"){
                leader = mYgetStyle(ele,k)*100 || 1;
            }
            //正常处理
            else{
                leader = parseInt(mYgetStyle(ele,k)) || 0;
            }
            //生成一个步长
            var step = (json[k] - leader) / 10;
            //处理步长，步长为正向上取整，为负向下取整
            step = step>0?Math.ceil(step):Math.floor(step);
            //开始出发，初始位置加上步长
            leader += step;
            //开始赋值						
            if(k == "opacity"){
                //特殊情况特殊赋值
                ele.style[k] = leader/100;
                //兼容ie
                ele.style.filter = "alpha(opacity="+leader+")";
            }
            //层级只需直接赋值
            else if(k == "zIndex"){
                ele.style[k] = json[k];
            }
            else{
                ele.style[k] = leader + "px";
            }
            
            //如果json里面有任意一个键值对的值没有对应leader，bool不能为true
            if(json[k] !== leader){
                bool = false;
            }
        }
        //清除定时器
        if(bool){
            clearInterval(ele.timer);
            //回调
            if(fn){
                fn();
            }
        }
    },time);
}


//封装一个获取行外样式的方法
function mYgetStyle(ele,attr){
    if(window.getComputedStyle){
        //w3c标准
        return window.getComputedStyle(ele,null)[attr];
    }
    //兼容ie
    return ele.currentStyle[attr];
}